import React, { memo } from 'react';
import { renderRoutes } from 'react-router-config';
import { Link } from 'react-router-dom';
import { useLocation } from "react-router";
import './Tabbar.css';
import { connect } from 'react-redux';
import { actionCreators } from '../../pages/main/store';
import ShopCountIcon from "@/components/common/shopCountIcon/ShopCountIcon";

const Tabbar = (props) => {
    let { route, index, goods } = props;
    // console.log(index);
    const { pathname } = useLocation()
    // console.log(pathname,'pathname');    
    // console.log(route,'--');
    const { path, routes } = route
    // console.log(path, 'path');
    index = routes.findIndex(item => item.path == pathname) - 1 //刷新后index与正确的路径对应
    // console.log(index,'index');
    // console.log(routes.findIndex(item => item.path == pathname));
    const { setIndexDispatch } = props;
    const countAmount = () => {
        let subCount = 0
        goods.map((item) => {
            subCount = subCount + item.count
        })
        // console.log(subCount,'=============');
        return subCount
    }
    return (
        <>
            {/* 二级路由而准备 */}
            {renderRoutes(route.routes)}
            <ul className="Tabbar-warper">
                <li
                    onClick={() => { setIndexDispatch(0) }}
                    className="Tabbar-warper-warp"
                    key="1">
                    <Link to="/home/main"
                        style={{ textDecoration: "none" }}>
                        <div className="icon">
                            {index === 0 ?
                                <svg t="1646632956881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2593" width="100" height="100"><path d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z" p-id="2594" fill="#fc9797" data-spm-anchor-id="a313x.7781069.0.i12"></path></svg> :
                                <svg t="1646632956881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2593" width="100" height="100"><path d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z" p-id="2594" fill="#8a8a8a"></path></svg>}
                        </div>
                        <div
                            style={index === 0 ? { color: '#fc9797' } : {}}
                            className="tabbar-title">首页</div>

                    </Link>
                </li>
                <li className="Tabbar-warper-warp" key="2"
                    onClick={() => { setIndexDispatch(1) }}>
                    <Link to='/home/shopping' style={{ textDecoration: "none" }}>
                        <div className="icon">
                            {index === 1 ?
                                <svg t="1646633531352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4632" width="100" height="100"><path d="M246.4 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="4633" fill="#fc9797"></path><path d="M716.8 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="4634" fill="#fc9797"></path><path d="M905.6 764.8l-537.6 0c-28.8 0-57.6-25.6-64-54.4l-96-566.4c-9.6-54.4-60.8-96-115.2-96l-22.4 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l22.4 0c28.8 0 57.6 25.6 64 54.4l96 566.4c9.6 54.4 60.8 96 115.2 96l537.6 0c12.8 0 25.6-12.8 25.6-25.6C931.2 777.6 921.6 764.8 905.6 764.8z" p-id="4635" fill="#fc9797"></path><path d="M880 179.2l-572.8 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l572.8 0c25.6 0 38.4 16 32 41.6l-70.4 281.6c-6.4 32-41.6 57.6-73.6 60.8l-396.8 28.8c-12.8 0-25.6 12.8-22.4 28.8 0 12.8 12.8 25.6 28.8 22.4l396.8-28.8c54.4-3.2 105.6-48 118.4-99.2l70.4-281.6C976 230.4 937.6 179.2 880 179.2z" p-id="4636" fill="#fc9797"></path></svg> :
                                <svg t="1646633531352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4632" width="100" height="100"><path d="M246.4 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="4633" fill="#8a8a8a"></path><path d="M716.8 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="4634" fill="#8a8a8a"></path><path d="M905.6 764.8l-537.6 0c-28.8 0-57.6-25.6-64-54.4l-96-566.4c-9.6-54.4-60.8-96-115.2-96l-22.4 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l22.4 0c28.8 0 57.6 25.6 64 54.4l96 566.4c9.6 54.4 60.8 96 115.2 96l537.6 0c12.8 0 25.6-12.8 25.6-25.6C931.2 777.6 921.6 764.8 905.6 764.8z" p-id="4635" fill="#8a8a8a"></path><path d="M880 179.2l-572.8 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l572.8 0c25.6 0 38.4 16 32 41.6l-70.4 281.6c-6.4 32-41.6 57.6-73.6 60.8l-396.8 28.8c-12.8 0-25.6 12.8-22.4 28.8 0 12.8 12.8 25.6 28.8 22.4l396.8-28.8c54.4-3.2 105.6-48 118.4-99.2l70.4-281.6C976 230.4 937.6 179.2 880 179.2z" p-id="4636" fill="#8a8a8a"></path></svg>}
                        </div>
                        <div className="tabbar-title" style={index === 1 ? { color: "#fc9797" } : {}}>
                            购物车
                            <ShopCountIcon top="0vh" left="50vw" num={countAmount()} />
                        </div>
                    </Link>
                </li>
                <li className="Tabbar-warper-warp" key="3"
                    onClick={() => {
                        setIndexDispatch(2);
                    }}>
                    <Link to='/home/my' style={{ textDecoration: "none" }}>
                        <div className="icon">
                            {index === 2 ?
                                <svg t="1646633684691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5557" width="100" height="100"><path d="M518 917.6c-45.1 0-89-8.3-130.6-24.7-12.8-5-19-19.5-14-32.2 5-12.8 19.5-19 32.2-14 35.7 14.1 73.5 21.2 112.4 21.2 167.2 0 301.8-130.8 306.5-297.9 0.4-13.7 11.7-24.6 25.5-24.2 13.7 0.4 24.5 11.8 24.2 25.5-5.4 194.2-161.9 346.3-356.2 346.3zM289.5 826.2c-6.2 0-12.3-2.3-17.1-6.9-68.4-65-107.5-152.7-110.4-246.9-0.2-3.2-0.2-7.1-0.2-11.1 0-115.8 56.6-224.8 151.4-291.6C373.3 227.4 444.1 205 518 205c70.9 0 139.2 20.7 197.6 59.9 11.4 7.6 14.4 23.1 6.8 34.5-7.7 11.4-23.1 14.5-34.5 6.8-50.2-33.7-108.9-51.5-169.9-51.5-63.6 0-124.5 19.3-176.2 55.7-81.6 57.5-130.3 151.3-130.3 250.9 0 2.9 0 5.9 0.2 8.8 2.5 81.8 36.2 157.3 95 213.2 9.9 9.5 10.3 25.2 0.8 35.1-4.9 5.2-11.5 7.8-18 7.8z" fill="#fc9797" p-id="5558"></path><path d="M186.9 596.5h-1.5c-103.2-6.2-184-92.1-184-195.6 0-108 87.9-195.9 195.9-195.9 57.5 0 111.9 25.1 149.2 69 8.9 10.5 7.6 26.1-2.8 35-10.4 8.9-26.1 7.6-35-2.8-27.8-32.7-68.4-51.5-111.3-51.5-80.8 0-146.4 65.6-146.4 146.2 0 77.2 60.3 141.4 137.3 146 13.7 0.8 24.1 12.6 23.3 26.3-0.7 13.2-11.7 23.3-24.7 23.3zM849.3 595.6c-6.2 0-12.2-2.3-16.8-6.5-5.4-4.9-8.3-11.9-8.1-19.2 0.1-2.9 0.1-5.7 0.1-8.6 0-102.7-51.1-198.1-136.6-255.1-6-4-10-10.5-10.9-17.7-0.9-7.2 1.5-14.4 6.4-19.8 37.2-40.5 89.9-63.7 144.7-63.7 47.8 0 93.9 17.4 129.7 49 10.3 9.1 11.3 24.8 2.2 35.1s-24.8 11.3-35.1 2.2c-26.7-23.6-61.1-36.6-96.8-36.6-31.5 0-62 10.3-87.1 28.8 78.5 62.9 126.6 155.8 132.6 256.4 59-19.3 100.7-74.9 100.7-139.1 0-11.8-1.4-23.4-4.1-34.7-3.2-13.3 4.9-26.8 18.3-30 13.4-3.2 26.8 4.9 30 18.3 3.7 15.1 5.5 30.8 5.5 46.5 0 98.7-73.8 182.4-171.6 194.5-1 0.1-2.1 0.2-3.1 0.2z" fill="#fc9797" p-id="5559"></path><path d="M333 518.1m-36.1 0a36.1 36.1 0 1 0 72.2 0 36.1 36.1 0 1 0-72.2 0Z" fill="#fc9797" p-id="5560"></path><path d="M702.9 518.1m-36.1 0a36.1 36.1 0 1 0 72.2 0 36.1 36.1 0 1 0-72.2 0Z" fill="#fc9797" p-id="5561"></path><path d="M551.8 717.9h-67.6c-14.1 0-27.5-6.2-36.9-16.9-9.7-11.1-14.1-26-12-40.7l12.2-88.3c5-35.7 35.3-62.7 70.5-62.7s65.5 27 70.5 62.7l12.2 88.3c2 14.7-2.3 29.6-12 40.7-9.4 10.8-22.8 16.9-36.9 16.9zM518 534.2c-22.9 0-42.6 17.7-45.9 41.3l-12.2 88.3c-1.1 7.6 1.2 15.3 6.2 21 4.7 5.4 11.2 8.4 18.2 8.4h67.6c7 0 13.4-3 18.2-8.4 5-5.7 7.2-13.3 6.2-21l-12.2-88.3c-3.5-23.6-23.2-41.3-46.1-41.3z" fill="#fc9797" p-id="5562"></path></svg> :
                                <svg t="1646633644814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5271" width="100" height="100"><path d="M518 917.6c-45.1 0-89-8.3-130.6-24.7-12.8-5-19-19.5-14-32.2 5-12.8 19.5-19 32.2-14 35.7 14.1 73.5 21.2 112.4 21.2 167.2 0 301.8-130.8 306.5-297.9 0.4-13.7 11.7-24.6 25.5-24.2 13.7 0.4 24.5 11.8 24.2 25.5-5.4 194.2-161.9 346.3-356.2 346.3zM289.5 826.2c-6.2 0-12.3-2.3-17.1-6.9-68.4-65-107.5-152.7-110.4-246.9-0.2-3.2-0.2-7.1-0.2-11.1 0-115.8 56.6-224.8 151.4-291.6C373.3 227.4 444.1 205 518 205c70.9 0 139.2 20.7 197.6 59.9 11.4 7.6 14.4 23.1 6.8 34.5-7.7 11.4-23.1 14.5-34.5 6.8-50.2-33.7-108.9-51.5-169.9-51.5-63.6 0-124.5 19.3-176.2 55.7-81.6 57.5-130.3 151.3-130.3 250.9 0 2.9 0 5.9 0.2 8.8 2.5 81.8 36.2 157.3 95 213.2 9.9 9.5 10.3 25.2 0.8 35.1-4.9 5.2-11.5 7.8-18 7.8z" fill="#8a8a8a" p-id="5272"></path><path d="M186.9 596.5h-1.5c-103.2-6.2-184-92.1-184-195.6 0-108 87.9-195.9 195.9-195.9 57.5 0 111.9 25.1 149.2 69 8.9 10.5 7.6 26.1-2.8 35-10.4 8.9-26.1 7.6-35-2.8-27.8-32.7-68.4-51.5-111.3-51.5-80.8 0-146.4 65.6-146.4 146.2 0 77.2 60.3 141.4 137.3 146 13.7 0.8 24.1 12.6 23.3 26.3-0.7 13.2-11.7 23.3-24.7 23.3zM849.3 595.6c-6.2 0-12.2-2.3-16.8-6.5-5.4-4.9-8.3-11.9-8.1-19.2 0.1-2.9 0.1-5.7 0.1-8.6 0-102.7-51.1-198.1-136.6-255.1-6-4-10-10.5-10.9-17.7-0.9-7.2 1.5-14.4 6.4-19.8 37.2-40.5 89.9-63.7 144.7-63.7 47.8 0 93.9 17.4 129.7 49 10.3 9.1 11.3 24.8 2.2 35.1s-24.8 11.3-35.1 2.2c-26.7-23.6-61.1-36.6-96.8-36.6-31.5 0-62 10.3-87.1 28.8 78.5 62.9 126.6 155.8 132.6 256.4 59-19.3 100.7-74.9 100.7-139.1 0-11.8-1.4-23.4-4.1-34.7-3.2-13.3 4.9-26.8 18.3-30 13.4-3.2 26.8 4.9 30 18.3 3.7 15.1 5.5 30.8 5.5 46.5 0 98.7-73.8 182.4-171.6 194.5-1 0.1-2.1 0.2-3.1 0.2z" fill="#8a8a8a" p-id="5273"></path><path d="M333 518.1m-36.1 0a36.1 36.1 0 1 0 72.2 0 36.1 36.1 0 1 0-72.2 0Z" fill="#8a8a8a" p-id="5274"></path><path d="M702.9 518.1m-36.1 0a36.1 36.1 0 1 0 72.2 0 36.1 36.1 0 1 0-72.2 0Z" fill="#8a8a8a" p-id="5275"></path><path d="M551.8 717.9h-67.6c-14.1 0-27.5-6.2-36.9-16.9-9.7-11.1-14.1-26-12-40.7l12.2-88.3c5-35.7 35.3-62.7 70.5-62.7s65.5 27 70.5 62.7l12.2 88.3c2 14.7-2.3 29.6-12 40.7-9.4 10.8-22.8 16.9-36.9 16.9zM518 534.2c-22.9 0-42.6 17.7-45.9 41.3l-12.2 88.3c-1.1 7.6 1.2 15.3 6.2 21 4.7 5.4 11.2 8.4 18.2 8.4h67.6c7 0 13.4-3 18.2-8.4 5-5.7 7.2-13.3 6.2-21l-12.2-88.3c-3.5-23.6-23.2-41.3-46.1-41.3z" fill="#8a8a8a" p-id="5276"></path></svg>}
                        </div>
                        <div className="tabbar-title" style={index === 2 ? { color: "#fc9797" } : {}}>
                            我的考拉
                        </div>
                    </Link>
                </li>
            </ul>
            {/* tabbar位置 */}
        </>
    )
}
const mapStateToProps = (state) => {
    return {
        index: state.main.index,
        goods: state.shopping.goods
    }
}
// setIndex   changeIndex
// 1. dispatch能力 
// 2. 返回值是一个对象

const mapDispatchToProps = (dispatch) => {
    return {
        setIndexDispatch(index) {
            dispatch(actionCreators.setIndex(index))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(memo(Tabbar));